<template>
  <!-- 注册页面 -->
  <view class="page">
    <view class="logo">
      <image src="../../static/logo.png" mode=""></image>
    </view>
    <!-- 填写区 -->
    <view class="input-info">
      <view class="info">
        <input type="tel" v-model="form.phone" maxlength="11" placeholder="手机号">
        <view class="more">

        </view>
      </view>
      <view class="info">
        <input type="tel" v-model="form.code" maxlength="6" placeholder="请输入验证码">
        <view class="more">
          <text class="mo">获取验证码</text>
          <text class="mo" style="display: none">59秒后重试</text>
        </view>
      </view>
      <view class="info">
        <input :password='!isPassword' maxlength="26" v-model="form.password" placeholder="请输入密码">
        <view class="more">
          <text class="iconfont" :class="isPassword?'icon-eye-on':'icon-eye-off'" @click="isPassword = !isPassword"></text>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn-info">
      <view class="btn" :style="isRegister?'opacity:1':'opacity:0.4'" @click="isRegister?onRegister():''">
        <text>注册</text>
      </view>
    </view>
    <!-- 操作 -->
    <view class="operation">
      <text></text>
      <text @click="onLogin">已有账号?登录</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isPassword: false,
      isRegister: false,
      // 表单
      form:{
        phone: '',
        code: '',
        password: '',
      },
    };
  },
  methods:{
    onLogin(){
      uni.redirectTo({
        url: '/subpkg/login/login'
      })
    },
    /**
     * 注册点击
     */
    onRegister(){
    }
  },
  watch:{
    form:{
      handler(newValue, oldValue) {
        if(newValue.phone && newValue.code && newValue.password){
          this.isRegister = true;
        }else{
          this.isRegister = false;
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
  /*每个页面公共css */
   @import '/colorui/main.css';
   @import '/colorui/icon.css';
   @import '/style/FontStyle.css';
.page{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}
.logo{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 240rpx;
  image{
    width: 160rpx;
    height: 160rpx;
  }
}
/* 填写 */
.input-info{
  padding: 0 6%;
  .info{
    display: flex;
    align-items:center;
    justify-content: space-between;
    width: 100%;
    height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;
    input{
      width: 70%;
      height: 100%;
      font-size: 26rpx;
      color: #222222;
    }
    .more{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 30%;
      height: 100%;
      .iconfont{
        font-size: 34rpx;
      }
      .mo{
        font-size: 26rpx;
        padding-left: 20rpx;
        margin-left: 10rpx;
        border-left: 2rpx solid #EEEEEE;
      }
    }
  }
}
/* 按钮 */
.btn-info{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;
  margin-top: 40rpx;
  .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 80rpx;
    background: linear-gradient(to right,$base,$change-clor);
    border-radius: 100rpx;
    color: #FFFFFF;
    font-size: 28rpx;
    opacity: 0.4;
  }
}
/* 操作 */
.operation{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  height: 80rpx;
  text{
    font-size: 28rpx;
    color: #555555;
  }
}

/* 其他 */
.other-ways{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80rpx;
  margin-top: 100rpx;
  text{
    font-size: 28rpx;
    color: #999999;
  }
}
.other-ways::after{
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #EEEEEE;
}
.other-ways::before{
  content: "";
  width: 36%;
  height: 2rpx;
  background-color: #EEEEEE;
}
/* 登录方式 */
.login-way{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;
  .way{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    image{
      width: 100rpx;
      height: 100rpx;
    }
    text{
      font-size: 28rpx;
      color: #959595;
      margin-top: 20rpx;
    }
  }
}

</style>
